<template>
  <div>

    <div style="text-align: right">
      <el-button type="text" @click="chapterFormVisible=true">添加章节</el-button>
    </div>

    <!--新增或修改章节-->
    <el-dialog :title="chapterStatus+'章节'" label-width="120px" :visible.sync="chapterFormVisible">
      <el-form :model="chapter">
        <el-form-item label="章节名称">
          <el-input v-model="chapter.title"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number :min="0" v-model="chapter.sort"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateChapter">确 定</el-button>
      </div>
    </el-dialog>

    <!--新增或修改小节-->
    <el-dialog :title="VideoStatus+'课时'" label-width="120px" :visible.sync="VideoFormVisible">
      <el-form :model="video">
        <el-form-item label="课时标题">
          <el-input v-model="video.title"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number :min="0" v-model="video.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="video.isFree">
            <el-radio :label="false">收费</el-radio>
            <el-radio :label="true">免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <!--上传视频-->
          <el-upload
            :on-success="handleVodUploadSuccess"
            :file-list="fileList"
            :action="BASE_API+'/vod/upload'"
            :limit="1"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            class="upload-demo">
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持10MB <br>
                支持。。。视频格式上传
              </div>
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="VideoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>

    <el-tree
      :data="chapterAndvideoList"
      node-key="id"
      :props="{ children: 'videos',label: 'title'}"
      :expand-on-click-node="false">
      <span class="custom-tree-node" @dblclick="updateNode(data)" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="data.videos"
            type="text"
            size="mini"
            @click="() => append(data)">
            添加课时
          </el-button>
          <el-button
            v-if="data.videos"
            type="text"
            size="mini"
            @click="() => removeChapter(node, data)">
            删除章节
          </el-button>
          <el-button
            v-if="!data.videos"
            type="text"
            size="mini"
            @click="() => removeVideo(node, data)">
            删除课时
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-form style="text-align: center">
      <el-form-item>
        <el-button @click="prve">返回上一步</el-button>
        <el-button type="primary" @click="next">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    import http from "@/api/chapter"
    import videoHttp from "@/api/video"

    export default {
        name: "chapter",
        props: {
            globalCourseId: '',
        },
        data() {
            return {
                chapterAndvideoList: [],
                chapterFormVisible: false,
                VideoFormVisible: false,
                chapter: {
                    id: null,
                    courseId: this.globalCourseId,
                    title: '',
                    sort: ''
                },
                video: {
                    id: null,
                    chapterId: '',
                    courseId: this.globalCourseId,
                    title: '',
                    sort: '',
                    isFree: '',
                },
                chapterStatus: "新增",
                VideoStatus: '新增',
                BASE_API: process.env.BASE_API,
                fileList:[]
            }
        },
        methods: {
            next() {
                this.$emit("next")
            },
            prve() {
                this.$emit("prve")
            },
            getChapterAndvideo() {
                http.getChapterAndvideoByCourseId(this.globalCourseId).then(res => {
                    this.chapterAndvideoList = res.data;
                })
            },
            addOrUpdateChapter() {
                http.addOrUpdateChapter(this.chapter).then(res => {
                    this.$message({
                        type: "success",
                        message: "章节" + this.chapterStatus + "成功！"
                    })
                    this.getChapterAndvideo()
                    this.chapterFormVisible = false
                    this.chapter.id = null
                    this.chapter.title = ''
                    this.chapter.sort = ''
                    this.VideoStatus = "新增"
                })
            },
            addOrUpdateVideo() {
                videoHttp.addOrUpdateVideo(this.video).then(res => {
                    this.$message({
                        type: "success",
                        message: "小节" + this.VideoStatus + "成功！"
                    })
                    this.getChapterAndvideo()
                    this.VideoFormVisible = false
                    this.video.id = null
                    this.video.chapterId = ''
                    this.video.title = ''
                    this.video.sort = ''
                    this.video.isFree = ''
                    this.chapterStatus = "新增"
                    this.fileList = []
                })
            },
            updateNode(date) {
                if (date.videos) {
                    //章节修改
                    this.chapterStatus = "修改"
                    this.chapterFormVisible = true
                    this.chapter = {...date}
                    this.chapter.courseId = this.globalCourseId
                } else {
                    //小节修改
                    this.VideoStatus = "修改"
                    this.VideoFormVisible = true
                    this.video = {...date}
                    this.video.courseId = this.globalCourseId
                    this.fileList = date.videoOriginalName?[{name:date.videoOriginalName}]:[]
                }
            },
            append(data) {
                this.VideoFormVisible = true
                this.video.chapterId = data.id
            },
            removeChapter(node, data) {
                this.$confirm('删除该章节, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    http.deleteChapter(data.id).then(res => {
                        this.$message({
                            type: "success",
                            message: "章节删除成功！"
                        })
                        this.getChapterAndvideo()
                    })
                }).catch(() => {
                });
            },
            removeVideo(node, data) {
                this.$confirm('删除该小节, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    videoHttp.deleteVideo(data.id).then(res => {
                        this.$message({
                            type: "success",
                            message: "小节删除成功！"
                        })
                        this.getChapterAndvideo()
                    })
                }).catch(() => {
                });
            },
            //当视频上传成功
            handleVodUploadSuccess(res,file, fileList){
                // this.fileList = fileList
                this.video.videoSourceId = res.data.VideoId
                this.video.videoOriginalName = res.data.videoOriginalName
            },
            beforeVodRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleVodRemove(file, fileList) {
                videoHttp.deleteVod(this.video.videoSourceId).then(res=>{
                    if (res.data){
                        this.$message({
                            type: "success",
                            message: "删除成功！"
                        })
                        this.video.videoSourceId = ''
                        this.video.videoOriginalName= ''
                    }

                })
            },
        },
        created() {
            this.getChapterAndvideo()
        },
    }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
